import { FC, useState, useRef, useEffect } from "react";
// React.FC<>是react在typescript中使用的一个泛型，FC即是Function Component的缩写，是函数组件，这个泛型里面可以使用useState。
import CartoonImage from "../../assets/cartoon.jpg";
import Moviemage from "../../assets/movie.png";
import LifeImage from "../../assets/life.jpg";
import FoodImage from "../../assets/food.jpg";
import LogoImage from "../../assets/logo.png";
import styles from './styles.module.scss'
import classNames from 'classnames'
let tabs = [
  {
    key: 'cartoon',
    title: '动画',
    img: CartoonImage
  },
  {
    key: 'food',
    title: '美食',
    img: FoodImage
  },
  {
    key: 'movie',
    title: '电影',
    img: Moviemage
  },
  {
    key: 'life',
    title: '生活',
    img: LifeImage
  }
]

const TAB_HEIGHT = 56;

// 1.点击Tab滚动跳转 ✔
// 2.Tabs吸顶 ✔
// 3.滚动时，高亮Tab ✔
// 4.按钮吸底
const SecondSection: FC = () => {
  const [activeTab, setActiveTab] = useState<string>('cartoon');
  const [isFixed, setIsFixed] = useState<boolean>(false)
  const secondSectionRef = useRef<HTMLDivElement>(null)

  // 点击Tab滚动跳转
  const activate = (key: string) => {
    setActiveTab(key)
    const tabContentEl = document.querySelector(`[data-id=${key}]`)

    // api scrollIntoView
    if (tabContentEl) {
      tabContentEl.scrollIntoView({ behavior: 'smooth' })
    }
  }
  // Tabs吸顶
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const onScroll = () => {
    if (secondSectionRef.current) {
      const { top } = secondSectionRef.current.getBoundingClientRect()
      setIsFixed(top <= 0)
      // console.log(isFixed);

      // 滚动时，高亮Tab
      const sectionNodes = secondSectionRef.current.querySelectorAll('section')
      Array.from(sectionNodes).forEach(sectionEl => {
        const { top } = sectionEl.getBoundingClientRect()
        // console.log(top);

        const key = sectionEl.getAttribute('data-id') || ''
        // console.log(key);
        if (top <= TAB_HEIGHT) {
          setActiveTab(key)
        }
      })
    }
  }
  // 监听全局window滚动
  useEffect(() => {
    window.addEventListener('scroll', onScroll)
    return () => {
      window.removeEventListener('scroll', onScroll)
    }
  }, [onScroll])

  return (
    <div className={styles.secondSection} ref={secondSectionRef}>
      {/* Tabs */}
      <ul className={classNames({ [styles.isFixed]: isFixed })}>
        {tabs.map(tab => (
          <li key={tab.key} onClick={() => activate(tab.key)}>
            <span>{tab.title}</span>
            <span className={classNames(styles.line, { [styles.visible]: activeTab === tab.key })}></span>
          </li>
        ))}
      </ul>
      {/* Tab Content */}
      <div>
        {tabs.map(tab => (
          <section key={tab.key} data-id={tab.key}>
            <h2>{tab.title}</h2>
            <img src={tab.img} alt={tab.key} />
          </section>
        ))}
      </div>
      {/* 按钮吸底 */}
      <div className={classNames(styles.btnWrapper, { [styles.visible]: isFixed })}>
        <img src={LogoImage} alt="LOGO" />
        <a href="https://www.bilibili.com/" target="_blank" rel="noreferrer">
          <button>App内打开</button>
        </a>
      </div>
    </div>
  )
}

export default SecondSection;